import { nextTick } from 'vue'
import loadingCss from '@/assets/styles/loading.scss'
// 定义方法
export const PrevLoading = {
  // 载入 css
  setCss: () => {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = loadingCss
    link.crossOrigin = 'anonymous'
    document.getElementsByTagName('head')[0].appendChild(link)
  },
  // 创建 loading
  start: () => {
    const bodys = document.body
    const div = document.createElement('div')
    div.setAttribute('class', 'loading-prev')
    const htmls = `
        <div class="spinner-box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>`
    div.innerHTML = htmls
    bodys.insertBefore(div, bodys.childNodes[0])
  },
  // 移除 loading
  done: () => {
    nextTick(() => {
      const el = document.querySelector('.loading-prev')
      el && el.parentNode?.removeChild(el)
    })
  }
}
